<template>
  <view class="content" style="padding-top: 0upx;">
    <view class="banner" :style="'background: url('+menu_res.image+');background-size: 100% 100%;'">
      <view class="haeds"></view>
      <view class="haed">
        <view class="city" @click="city()">
          杭州
          <img src="@/static/img00/unfold.png" />
        </view>

        <view class="input" @click="shuru()">
          <img src="@/static/img00/magni1.png" alt="搜索" />
          <p>请输入楼盘名或区域</p>
        </view>

		  <view class="login" @click="login()">
			<img src="@/static/img00/profile.png" alt="用户中心" />
			<!-- <img src="../../static/img00/profile.png" alt /> -->
		  </view>
      </view>

      <view class="banner-text">
		  <view class="tit">新房咨询师  帮你选房</view>
		  <view class="desc">数字化一站式平台</view>
      </view>
    </view>
    <!-- 头部栏 -->

    <!-- 常用入口  -->
    <view class="entrance">
      <ul>
        <li v-for="(item,index ) in sites" :key="index" @click="hreftwo(item.name)">
            <img :src="item.img" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </view>
    <!-- 常用入口  -->

    <!-- 文字上下滚动滚动 -->
    <!-- <view class="border">
      <ul>
        <li v-for="(item,index) in roll" :key="index">
          <a href>{{item.list}}</a>
        </li>
        <view class="but" type="bottom" @click="open2({
								type:'changePrice',
								msg:'咨询房价走势',
								title:'咨询房价走势',
								text:'价格变动这么快？！价格变动通知，涨价降价我们将第一时间通知您，帮您找准买房时机！',
							})">咨询房价走势</view>
         
      </ul>
    </view> -->
	
    <!-- 文字上下滚动滚动 -->

    <!-- 楼盘 -->
    <view class="row">
      <a href="javascript:void(0)">
        <view class="hd">
          <h2>新房,焕新起航</h2>
        </view>
      </a>

      <view class="schq-v1_2">
        <view class="jun">
          <h3>超级好盘</h3>
          <p>双地铁0首付</p>
          <view class="jun-but">点击进入</view>
        </view>

        <view  class="jun1" v-for="(item, index) in loupanList.choice" :key="index" @click="details(item.id)">
          <view class="jun-log">
            <img :src="item.image" alt />
            <span class="hint">在售</span>
            <view class="eye">
              <img src="../../static/img00/yey.png" alt />
              <span class="quantity">{{item.click}}</span>
            </view>
          </view>
          <h4>{{item.title}}</h4>
          <span class="area">{{item.qu}}</span>
          <view class="money">
            {{item.price}}
            <span>元/m2</span>
          </view>
        </view>

      </view>
    </view>
    <!-- 楼盘 -->
	
	
	<view class="row top">
	  <a href="javascript:void(0)">
	    <view class="hd">
	      <h2>精选临安</h2>
	    </view>
	  </a>
	<view class="bd">
	  <view class="schq-v1_2">
	    <view  class="jun1" v-for="(item, index) in loupanList.renqi" :key="index" @click="details(item.id)">
	      <view class="jun-log">
	        <img :src="item.image" alt />
	        <span class="hint">在售</span>
	        <view class="eye">
	          <img src="../../static/img00/yey.png" alt />
	          <span class="quantity">{{item.click}}</span>
	        </view>
	      </view>
	      <h4>{{item.title}}</h4>
	      <span class="area">{{item.qu}}</span>
	      <view class="money">
	        {{item.price}}
	        <span>元/m2</span>
	      </view>
	    </view>
	  </view>
	  </view>
	</view>
	
	<view class="row top">
	  <a href="javascript:void(0)">
	    <view class="hd">
	      <h2>热搜好盘</h2>
	    </view>
	  </a>
	<view class="bd">
	  <view class="schq-v1_2">
	    <view  class="jun1" v-for="(item, index) in loupanList.resou" :key="index" @click="details(item.id)">
	      <view class="jun-log">
	        <img :src="item.image" alt />
	        <span class="hint">在售</span>
	        <view class="eye">
	          <img src="../../static/img00/yey.png" alt />
	          <span class="quantity">{{item.click}}</span>
	        </view>
	      </view>
	      <h4>{{item.title}}</h4>
	      <span class="area">{{item.qu}}</span>
	      <view class="money">
	        {{item.price}}
	        <span>元/m2</span>
	      </view>
	    </view>
	  </view>
	  </view>
	</view>
	
	
	<view class="row top">
	  <a href="javascript:void(0)">
	    <view class="hd">
	      <h2>咨询师精选低价笋盘</h2>
	    </view>
	  </a>
	<view class="bd">
	  <view class="schq-v1_2">
	    <view  class="jun1" v-for="(item, index) in loupanList.rexiao" :key="index" @click="details(item.id)">
	      <view class="jun-log">
	        <img :src="item.image" alt />
	        <span class="hint">在售</span>
	        <view class="eye">
	          <img src="../../static/img00/yey.png" alt />
	          <span class="quantity">{{item.click}}</span>
	        </view>
	      </view>
	      <h4>{{item.title}}</h4>
	      <span class="area">{{item.qu}}</span>
	      <view class="money">
	        {{item.price}}
	        <span>元/m2</span>
	      </view>
	    </view>
	  </view>
	  </view>
	</view>

    <!-- 咨询律师 -->
    <view class="consult">
      <view class="hd" @click="zixun()">
        <p class="consult-haed">多维度管家</p>
        <p class="know zixun1">了解更多咨询师 ></p>
      </view>
      <!-- <custom :jdata="counselor"></custom> -->
	  <view class="content">
	    <view class="mfgs-item" v-for="item in counselor" :key="item.id" >
	      <view class="swiper-slide mar-bottom" >
	        <view class="container-itemV3" >
	          <view class="item-con item-front">
	            <view class="btn-area click_open_layer">
	  				<a class="common-call" href="javascript:void(0);" @click="open({
								type:'counselor',
								msg:'向他咨询',
								title:'向他咨询',
								item:item
							})">
	  				  向他咨询
	  				  <span class="icon icon-zixun"></span>
	  				</a>
	  			      <img :src="item.image" :alt="item.name" @click="cou_details(item.id)" />
	              
	            </view>
	            <a class="card-front" @click="cou_details(item.id)" style="float: left;margin-top:30rpx;">
	              
	              <view class="zxs_info" style="background:#ffffff;">
	                <view class="title">
	                  <p class="tit">{{item.name}}</p>
	                  <p class="ti">{{item.type_arr_one[0]}}</p>
	                </view>
	                <view class="stars">
	                  <img src="../../static/img00/score.png" />
	                  <img src="../../static/img00/score.png" />
	                  <img src="../../static/img00/score.png" />
	                  <img src="../../static/img00/score.png" />
	                  <img src="../../static/img00/score.png" />
	                </view>
	                <view class="num">
	                  <p>服务客户：{{item.clients}}人</p> 
	                  <p>勘察楼盘：{{item.survey}}次</p>
	                </view>
	                <view class="cou-desc">
	                {{item.description}} 
					</view>
	              </view>
	            </a>
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
    </view>


    <!-- 房象传媒-->
    <view class="media">

        <view class="hd">
            <p class="consult-haed">房象传媒</p>
            <p class="know">了解更多></p>
        </view>

      <media :jdata="news_res" ></media>

    </view>

    <!-- 推荐楼盘 -->
    <view class="recommend">
       <view class="hd">
            <p class="consult-haed">推荐楼盘</p>
            <p class="know">了解更多楼盘></p>
        </view>

      <recommend :jdata="tui_res"></recommend>
    </view>

    <!-- 查看更多 -->
    <view>
      <examine></examine>
    </view>

    <view>
      <foot></foot>
    </view>
	
	<view class="bottom"></view>
	<tabBar></tabBar>
	
    <!-- <button @click="open">打开弹窗</button> -->
	
	<uni-popup ref="popup" type="center">
	    <view class="pop-content">
	        <view class="pop-zxs-intr-v3">
	            <view @click="close()" class="pop-shut"></view>
	            <view class="pop-zxs-pic">
	                <img :src="pop_three.image" :alt="pop_three.name">
	            </view>
	            <view class="pop-zxs-txt">
	                <h5>{{pop_three.name}}</h5>
	                <p>已为<span>{{pop_three.clients}}</span>人解答过问题</p>
	            </view>
	            <view class="pop-text">
	                <p class="pop-text-p1">买房政策、房源信息、楼盘分析</p>
	                <p>有问题，他将在第一时间为您解答！ </p>
	            </view>
	             <view class="pop-phone">
	                <input @input="onKeyInput2" :value="mobile" type="pop-text" placeholder="请输入订阅手机号" >
	            </view>
	            <button class="pop-btn-area"  @click="expert">确定</button>
	        </view>
	    </view>   
	</uni-popup> 
	
	
	<uni-popup ref="popup2" type="center">
	    <view class="popone-content">
	        <view  class="popone-bohu">
	            <view @click="close()" class="popone-shut"></view>
	
	            <view class="popone-title">订阅价格变动通知</view>
	
	            <p class="popone-text">价格变动这么快？！订阅价格变动通知，涨价降价我们将第一时间通知您，帮您找准买房时机！</p>
	
	            <view class="popone-phone">
	                <input @input="onKeyInput2" :value="mobile" type="text" placeholder="请输入订阅手机号">
	            </view>
	
	            <button class="popone-btn-area"  @click="expert">确定</button>
	        </view> 
	    </view>   
	</uni-popup>
	
  </view>
</template>

<script>

import { goods } from "@/config/mixins.js";
import { goBack } from "@/config/mixins.js";

// 引入组件
import custom from "./custom.vue";
import media from "./media.vue";
import recommend from "./recommend";
import examine from "./examine";
import foot from "./foot";

import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import tabBar from '@/components/tabBar/tabBar.vue'

export default {
  // mixins: [goods],
  
  components: {
    custom,
    media,
    recommend,
    examine,
    foot,
	tabBar,
	uniPopup,
	uniPopupMessage,
	uniPopupDialog,
	
  },
  data() {
    return {
		swiper: {
			indicatorDots: true,
			autoplay: true,
			interval: 3000,
			duration: 800,
		}, // 轮播图属性设置
      sites: [
        { name: "楼盘查询", img: require("../../static/img00/download1.png") },
        { name: "咨询师", img: require("../../static/img00/download2.png") },
        { name: "专车看房", img: require("../../static/img00/download3.png") },
        { name: "买房问问", img: require("../../static/img00/wen.png") },
        { name: "楼盘合作", img: require("../../static/img00/he.png") },
        { name: "帮你找房", img: require("../../static/img00/download6.png") },
        { name: "房象传媒", img: require("../../static/img00/download4.png") },
        { name: "贷款计算", img: require("../../static/img00/ji.png") },
      ],

      roll: [
        { list: "1111111111111" },
        { list: "2222222222222" },
        { list: "3333333333333" },
      ],
	  menu_res:{},
	  lists:[],
	  loupanList:{},
	  counselor:{},
	  news_res:{},
	  tui_res:{},
	  param:{},
	  pop_three:{},//弹窗3
	  mobile:'',
    };
  },
	onLoad(e) {
		
		this.initData();
	},
	
  methods: {
	  open(data){
		  this.pop_three = data.item;
		  this.param ={
		  	'type': data.type,
		  	'msg': data.msg,
		  };
	      this.$refs.popup.open()
	  },
	  open2(data){
	  	// console.log(data);
	  	this.pop_title = data.title;
	  	this.pop_text = data.text;
	  	this.param ={
	  		'type': data.type,
	  		'msg': data.msg
	  	};
	      this.$refs.popup2.open();
	  },
	  close(){
	       this.$refs.popup.close()
	  },
	  
	  close1(){
	      this.$refs.message.close()
	  },
	  onKeyInput2: function(event) {
	  	this.mobile = event.target.value
	  },
	  expert(){
	  	//提交
	  	let _this = this;
	  	let mobile = this.mobile;
	  	if(mobile == ''){
	  		uni.showToast({
	  		    title: '手机号码不能为空',
	  		    duration: 2000,
	  			icon:'none'
	  		});
	  		return false;
	  	}
	  	
	  	var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
	  	if (!myreg.test(mobile)) {
	  		uni.showToast({
	  		    title: '请输入正确的手机号',
	  		    duration: 2000,
	  			icon:'none'
	  		});
	  		return false;
	  	}
	  	this.param.mobile = mobile;
	  	// this.param.loupan_res = this.info;
		this.param.counselor_id = this.pop_three.id;
	  	this.$api.pushAjaxSubmit({
	  			param:_this.param
	  		},
	  		res => {
				if(res.code == 1){
					uni.showToast({
					    title: res.msg,
					    duration: 2000
					});
				}else{
					uni.showToast({
					    title: res.msg,
					    duration: 2000,
						icon:'none'
					});
				}
	  			_this.$refs.popup.close()
	  		}
	  	);
	  },
	  
	  expert2(){
	  	//提交
	  	let _this = this;
	  	let mobile = this.mobile;
	  	if(mobile == ''){
	  		uni.showToast({
	  		    title: '手机号码不能为空',
	  		    duration: 2000,
	  			icon:'none'
	  		});
	  		return false;
	  	}
	  	
	  	var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
	  	if (!myreg.test(mobile)) {
	  		uni.showToast({
	  		    title: '请输入正确的手机号',
	  		    duration: 2000,
	  			icon:'none'
	  		});
	  		return false;
	  	}
	  	this.param.mobile = mobile;
	  	this.$api.pushAjaxSubmit({
	  			param:_this.param
	  		},
	  		res => {
	  			if(res.code == 1){
	  				uni.showToast({
	  					title: res.msg,
	  					duration: 2000
	  				});
	  			}else{
	  				uni.showToast({
	  					title: res.msg,
	  					duration: 2000,
	  					icon:'none'
	  				});
	  			}
	  			_this.$refs.popup2.close()
	  		}
	  	);
	  },
	  
	 //登录
	login(){
		this.$common.navigateTo("/pages/login/login/index1");
	},
    // 首页初始化获取数据
    initData() {
    	//获取首页配置
    	this.$api.getPageIndex({
    			// code: this.pageCode
    		},
    		res => {
				this.menu_res = res.data.menu_res;
				this.loupanList = res.data.loupanList;
				this.counselor = res.data.counselor;
				this.news_res = res.data.news_res;
				this.tui_res = res.data.tui_res;
				console.log(res)
    		}
    	);
    },

    //跳转楼盘
    details(loupan_id){
      this.$common.navigateTo("./details/Details?loupan_id="+loupan_id);
    },

    //跳转输入区页面
    shuru(){
        this.$common.navigateTo("./shuru/Shuru")
    },

    //跳转城市查询页面
    city(){
         this.$common.navigateTo("./city/City")
    },
    zixun(){
      this.$common.navigateTo("./counselor/Counselor");
    },
	//跳转咨询师详情
	cou_details(id){
		this.$common.navigateTo("./detail/Detail?id="+id);
	},
    hreftwo(name) {
      if (name == "楼盘查询") {
        this.$common.navigateTo("./houses/AllHouses");
      } else if (name == "咨询师") {
        this.$common.navigateTo("./counselor/Counselor");
      } else if(name == "专车看房"){
        this.$common.navigateTo("./tailored/Tailored");
      }else if(name == "帮你找房"){
        this.$common.navigateTo("./seek/Seek");
      }else if(name == "房象传媒"){
        this.$common.navigateTo("./transmit/Transmit?type=0");
      }else if(name == "楼盘合作"){
		  this.$common.navigateTo("./protocol/Protocol?id=13");
	  }else if(name == '贷款计算'){
		  // this.$common.navigateTo("./index2");
		  this.$common.navigateTo("./daikuan/daikuan");
	  }else if(name == '买房问问'){
		  this.$common.navigateTo("./transmit/Transmit?type=1");
	  }
    },
	
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  background: #fff;
  /* margin-left: 20upx; */
}
/* 头部logo */

.banner {
  height: 420upx;
  /* background: url("../../static/img00/logo.jpg"); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.haeds {
  height: 60upx;
}
.haed {
  height: 420upx;
  display: flex;
  flex-direction: row;
}
.city {
  height: 68upx;
  width: 116upx;
  color: #fff;
  line-height: 68upx;
  font-size: 32upx;
  margin-left: 40upx;
}
.city > img {
  height: 32upx;
  width: 32upx;
  margin-left: 16upx;
}
.input {
  width: 460upx;
  height: 68upx;
  line-height: 68upx;
  background: #fff;
  border-radius: 04upx;
  font-size: 32upx;
  font-weight: 400;
  color: #a9bacf;
  margin-left: 20upx;
}
.input > img {
	width:36upx;
	height:36upx;
  margin-left: 40upx;
  margin-top: 16upx;
  float: left;
}
.input>p{
  margin-left: 20upx;
  float: left;
}
.login {
  	width:36upx;
	height:36upx;
  color: #fff;
  line-height: 68upx;
  margin: 0 auto;
}
.login > img {
  height: 100%;
  width: 100%;
  margin-top: 20upx;
}

.banner-text{
  /* float: left; */
  margin-top: -280upx;
  margin-left: 160upx;
  color: #fff;
}
.tit{
  font-size: 44upx;
}
.desc{
  font-size: 24upx;
  margin-top: 10upx;
}


/* 头部logo */

/* 常用入口 */
.entrance {
  height: 300upx;
  /* border: solid 1px red; */
  margin-bottom: 40upx;
  margin-top: 40upx;
}
.entrance > ul {
  height: 180upx;
  display: flex;
  flex-wrap: wrap;
}
.entrance > ul > li {
  list-style: none;
  width: 136upx;
  height: 136upx;
  margin-left: 46upx;
  margin-top: 10upx;
  /* line-height: 2.4rem; */
}
.entrance > ul > li > img {
  width: 92upx;
  height: 92upx;
}
/* 常用入口 */

/* 文字上下滚动滚动  */
.border {
  width: 674upx;
  height: 336upx;
  border-radius: 10upx;
  margin: 0 auto;
  box-shadow: darkcyan 6upx 6upx 6upx 6upx;
  -webkit-box-shadow: 6upx 6upx 20upx 6upx #999;
  margin-bottom: 40upx;
}
.border > ul {
  list-style: none;
  padding-top: 40upx;
  width: 674upx;
  height: 260upx;
}
.border > ul > li {
  height: 40upx;
  margin-left: 30upx;
}
.border > ul > li > a {
  text-decoration: none;
  color: #000;
  line-height: 40upx;
}

.but {
  width: 580upx;
  height: 74upx;
  border: 02upx solid #13c3c3;
  -webkit-border-radius: 140upx;
  -moz-border-radius: 140upx;
  text-align: center;
  line-height: 74upx;
  color: #13c3c3;
  margin: 0 auto;
  margin-top: 60upx;
  letter-spacing: 4upx;
}
/* 文字上下滚动滚动  */

/* 楼盘 */
.row {
  clear: both;
  height: 420upx;
  overflow: hidden;
}
.hd {
  height: 56upx;
  margin-left: 40upx;
  margin-bottom: 20upx;
}
.row > a {
  text-decoration: none;
  color: #000;
  margin-top: 40upx;
}
.schq-v1_2 {
  height:196upx;
  display: flex;
  flex-direction: row;
}
.jun {
  height: 328upx;
  width: 216upx;
  border: 1px solid #999;
  border-radius: 6upx;
  margin-left: 40upx;
  background: #fd5751;
  float: left;
  margin-right: 12upx;
}
.jun > p {
  color: #fff;
  margin-left: 20upx;
  margin-top: 40upx;
}

.jun > h3 {
  color: #fff;
  margin-top: 40upx;
  margin-left: 20upx;
}

.jun-but {
  color: #fff;
  margin-top: 20upx;
  margin-left: 20upx;
  height: 64upx;
  width: 170upx;
  border: solid 1upx #fff;
  border-radius: 10upx;
  text-align: center;
  line-height: 64upx;
  margin-top: 60upx;
}
.jun1 {
  height: 302upx;
  width: 216upx;
  border: 1upx solid #cdd7e1;
  border-radius: 6upx;
  margin-right: 12upx;
  float: left;
}

.jun-log {
  width: 210upx;
  height: 168upx;
}
.jun-log > img {
  width: 100%;
  height:100%;
}
.hint {
  height: 36upx;
  width: 64upx;
  color: #fff;
  background-color: #0ad487;
  float: right;
  line-height: 36upx;
  text-align: center;
  font-size: 22upx;
  border-radius: 6upx;
  margin-top: -174upx;
}
.eye {
  height: 45upx;
  background: #000;
  opacity: 0.5;
  margin-top: -54upx;
  margin-left: 0;
}
.eye img{
	width:40rpx;
	height:20rpx;
}
.quantity {
  color: #fff;
  line-height: 45upx;
}
h4 {
  margin-top: 14upx;
  overflow:hidden; 
  /* 超出的文本隐藏 */
  text-overflow:ellipsis; 
  /* 溢出用省略号显示 */
  white-space:nowrap; 
  /* 溢出不换行 */
}

h4,
.area,
.money {
  margin-left: 20upx;
  overflow:hidden; 
  /* 超出的文本隐藏 */
  text-overflow:ellipsis; 
  /* 溢出用省略号显示 */
  white-space:nowrap; 
  /* 溢出不换行 */
}
.area {
  color: #77808a;
  font-size: 24upx;
}
.money {
  font-size: 24upx;
  color: #fa5f35;
  font-weight: 600;
  margin-top: 6upx;
}
/* 楼盘 */

.bd{
	margin-left:40upx;
}
.top{ 
	margin-top:40upx;
}

/* 小标题 */
.hd {
  width: 750upx;
  height: 56upx;
  margin:40upx 0 20upx 40upx ;
}

.consult-haed {
  font-size: 42upx;
  font-weight: 600;
  float: left;
}
.know {

  color: #a8adb4;
  float: right;
  margin-right: 90upx;
  line-height: 56upx;
}
.bottom{
	height: 80rpx;
}









	.swiper {
		height:360rpx;
	}
	.swiper-c {
		height: 100%;
	}
	
	.swiper-c img {
		height: 100%;
		width: 100%;
	}
	.swiper-list .img-grids-item {
		height: 350rpx !important;
	}
	
	.swiper-grids .swiper-list {
		white-space: nowrap;
		width: 100%;
		min-height: 200upx;
	}
	
	.swiper-grids .img-grids-item {
		float: none;
		margin-right: 0;
		width: 255upx;
		margin-top: 0;
	}
	
	.swiper-grids .img-grids-item:last-child {
		margin-right: 26upx;
	}
	
	.swiper-grids .img-grids-item-t {
		width: 255upx;
		height: 255upx;
	}
	
	.swiper-grids .goods-name {
		white-space: normal;
	}
	
	/* uni-swiper-dots{
		display: none;
	} */
		
		
		
		
		
		
		
		
		
	/* 咨询律师 */
	.mfgs-item {
	  width: 668upx;
	  height: 296upx;
	  margin-left:40upx;
	  margin-top: 20upx;
	  border: 1upx solid #cdd7e1;
	  -webkit-border-radius: 1upx;
	  -moz-border-radius:1upx;
	  border-radius: 1upx;
	}
	
	.btn-area{
		width: 210upx;
		height: 296upx;
		border:1upx solid #999;
		float: left;
		position: relative;
	}
	.btn-area>img{
	  width: 208upx;
		height:290upx;
	}
	.common-call{
		padding: 10upx 20upx;
		position: absolute;
		/* margin-top:-5rpx;
		margin-left:30upx ; */
		background: #35CCCC;
		color: #fff;
		text-decoration: none;
		/* float: left; */
		top:220rpx;
		left: 30rpx;
	}
	.card-front{
		/* width:412upx;
		height:148upx;
		float: left; */
	}
	.zxs_info{
	  	width:412upx;
	    height:268upx;
	    /* float: left; */
	    margin-top:-20upx ;
	    margin-left:20upx ;
	}
	.title,.num{
		width:390upx;
		height: 38upx;
	  margin: 0 auto;
	  margin-top: 10upx;
	}
	.title>p{
	  float: left;
	  margin-left: 20upx;
	}
	.tit{
		  display: inline;
	    font-size: 28upx;
	    font-weight: 600; 
	}
	.ti{
	  font-size: 24upx;
	
	}
	.stars{
		height: 36upx;
		width: 390upx;
		margin-left:20upx ; 
		/* float: left; */
		margin-top: 20upx;
	}
	.stars img{
		width:30rpx;
		height:30rpx;
	}
	.num>p{
	  float: left;
		font-size: 24upx;
	  color: rgba(20,196,196,1);
	  margin-left:10upx;
	}
	.cou-desc{
		font-size: 8upx;
		height:88upx;
	  width:390upx;
		margin-top:08upx;
		margin-left:20upx;
	  font-size: 24upx;
	  font-family:Source Han Sans CN;
	  color:rgba(154,154,154,1);
	  text-overflow: ellipsis;
	  display:-webkit-box; 
	  -webkit-box-orient:vertical; 
		-webkit-line-clamp:3;
		line-height: 30upx;
		overflow: hidden;
	}	
		
		




/* pop three */
	.pop-shut{
        height: 32upx;
        width: 32upx;
        position: relative;
        top:-30upx;
        left: 560upx;
        background: url("../../static/img00/shut.png") no-repeat;
        background-size: 100% 100%;
    }
	.pop-content{  

        background: #fff;
        border-radius: 10upx;
        display: flex;
    } 

    .pop-zxs-intr-v3{
        padding: 50upx 60upx 50upx 60upx;
        margin: 0 auto;

    }
    .pop-zxs-pic{
        height: 120upx;
        width: 120upx;  
        float: left;
    }
    .pop-zxs-pic>img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }

    .pop-zxs-txt{
        height: 120upx;
        margin-left: 140upx;
        line-height: 60upx;
       
    }
    .pop-zxs-txt>h5{
        font-size: 32upx;
    }
    .zxs-txt>p{
        font-size: 28upx;
        color: #77808a;
    }
    .pop-zxs-txt>p>span{
        color: #13c3c3;
    }
    .pop-text{
        margin-top: 50upx;
        margin-bottom: 80upx;
    }
    .pop-text>p{
        width: 500upx;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .pop-text-p1{
        margin-left: 20upx;
        margin-right: 40upx;
    }
    .pop-phone{
        border: 1upx solid #cdd7e1;
        border-radius: 10upx;
    }
    .pop-phone>input{
        padding: 0 30upx;
		border: 1px solid #E3E3E3;
    }
    input{
        height: 86upx;
    }
	.pop-btn-area{
        margin-top: 80upx;
        margin-bottom: 30upx;
        background: #13c3c3;
        color: #fff;
    }
	.pop-expert2-popup{
        width: 510upx;
        height: 240upx;
        background: #fff;
        border-radius: 10upx;
    }
    .pop-expert2-popup-p{
        height: 150upx;
        text-align: center;
        font-size: 28uxp;
        color: #3e4a59;
        line-height: 150upx;
        border-bottom: 1upx solid rgb(195, 195, 195);
    }
    .pop-expert2-popup-shut{
        text-align: center;
        line-height: 90upx;
        color: #47b3e3;
    } 
/* php three end */




.popone-shut{
        height: 32upx;
        width: 32upx;
        position: relative;
        top:-30upx;
        left: 480upx;
        background: url("../../static/img00/shut.png") no-repeat;
        background-size: 100% 100%;
    }
    .popone-content{

        margin-left: 10%;
        margin-right: 10%;
        background: #fff;
        border-radius: 10upx;
        display: flex;
    }
    .popone-bohu{
        padding: 50upx 60upx 50upx 60upx;
        margin: 0 auto;
        align-self: center;
    }

    .popone-title{
        font-size: 40upx;
        font-weight: 550;
        color: #3e4a59;
        text-align: center;
    }
    .popone-text{
        margin:30upx 0 50upx 0;
        text-align: center;
		color: #000000;
		line-height: 60rpx;
		font-weight: 500;
    }
    .popone-phone{
        border: 1upx solid #cdd7e1;
        border-radius: 10upx;
    }
    .popone-phone>input{
        padding: 0 30upx;
		color: #000000;
		font-weight: 500;
		border:1px solid #CCCCCC;
    }
    input{
        height: 86upx;
    }
    .popone-btn-area{
        margin-top: 30upx;
        background: #13c3c3;
        color: #fff;
    }

    .popone-expert2-popup{
        width: 510upx;
        height: 240upx;
        background: #fff;
        border-radius: 10upx;
    }
    .popone-expert2-popup-p{
        height: 150upx;
        text-align: center;
        font-size: 28uxp;
        color: #3e4a59;
        line-height: 150upx;
        border-bottom: 1upx solid rgb(195, 195, 195);
    }
    .popone-expert2-popup-shut{
        text-align: center;
        line-height: 90upx;
        color: #47b3e3;
    }
</style>
